import React from 'react';
import { Card, Progress, Typography, Space, Tag } from 'antd';
import { 
  LoadingOutlined, 
  CheckCircleOutlined, 
  ExclamationCircleOutlined,
  FileTextOutlined,
  FilePdfOutlined,
  CloudUploadOutlined
} from '@ant-design/icons';
import './ConversionProgress.scss';

const { Text } = Typography;

const ConversionProgress = ({ progressData }) => {
  // 如果没有进度数据，不显示组件
  if (!progressData || Object.keys(progressData).length === 0) {
    return null;
  }

  const getStatusIcon = (status) => {
    switch (status) {
      case 'uploading':
        return <CloudUploadOutlined spin style={{ color: '#1890ff' }} />;
      case 'converting':
        return <LoadingOutlined spin style={{ color: '#1890ff' }} />;
      case 'pdf_completed':
        return <FilePdfOutlined style={{ color: '#52c41a' }} />;
      case 'completed':
        return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
      case 'error':
        return <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />;
      default:
        return <FileTextOutlined style={{ color: '#666' }} />;
    }
  };

  const getStatusColor = (status) => {
    switch (status) {
      case 'uploading':
      case 'converting':
        return '#1890ff';
      case 'pdf_completed':
      case 'completed':
        return '#52c41a';
      case 'error':
        return '#ff4d4f';
      default:
        return '#666';
    }
  };

  const getStatusText = (status) => {
    switch (status) {
      case 'uploading':
        return '上传中';
      case 'converting':
        return '转换中';
      case 'pdf_completed':
        return 'PDF转换完成';
      case 'completed':
        return '处理完成';
      case 'error':
        return '处理失败';
      default:
        return '处理中';
    }
  };

  return (
    <div className="conversion-progress-container">
      <Card 
        title={
          <Space>
            <LoadingOutlined spin />
            <span>文档处理进度</span>
          </Space>
        }
        size="small"
        className="conversion-progress-card"
      >
        {Object.entries(progressData).map(([fileId, progress]) => (
          <div key={fileId} className="progress-item">
            <div className="progress-header">
              <Space>
                {getStatusIcon(progress.status)}
                <Text strong className="file-name">
                  {progress.fileName}
                </Text>
                <Tag color={getStatusColor(progress.status)} size="small">
                  {getStatusText(progress.status)}
                </Tag>
              </Space>
            </div>
            
            <div className="progress-content">
              <Progress
                percent={progress.percent}
                status={progress.status === 'error' ? 'exception' : 'active'}
                strokeColor={{
                  '0%': '#108ee9',
                  '100%': '#87d068',
                }}
                size="small"
                showInfo={false}
              />
              
              <div className="progress-stage">
                <Text type="secondary" className="stage-text">
                  {progress.stage || '处理中...'}
                </Text>
                <Text type="secondary" className="progress-percent">
                  {progress.percent}%
                </Text>
              </div>
            </div>
          </div>
        ))}
      </Card>
    </div>
  );
};

export default ConversionProgress;